<template>
  <router-view />
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import { onMounted, watch } from 'vue';
import { initDynamicRouter } from "@/router/permission";
import {useRouter} from 'vue-router';

const store = useSystemStore();
const router = useRouter();
const { themeConfig } = storeToRefs(store);
watch(
  () => themeConfig.value.themeMode,
  () => {
    window.document.documentElement.setAttribute(
      'theme-mode',
      themeConfig.value.themeMode,
    );
  },
  { immediate: true },
);
watch(
  () => themeConfig.value,
  () => {
    document.documentElement.style.setProperty(
      '--color-primary',
      themeConfig.value.themeColor,
    );
    document.documentElement.style.setProperty(
      '--sidebar-bg',
      themeConfig.value.sideBarBg,
    );
    document.documentElement.style.setProperty(
      '--iconfont-default',
      themeConfig.value.fontAndIconDefault,
    );
    document.documentElement.style.setProperty(
      '--iconfont-selected',
      themeConfig.value.fontAndIconSelected,
    );
    // document.documentElement.style.setProperty('--menu-selected', themeConfig.value.menuSelected);
  },
  { immediate: true, deep: true },
);
onMounted(async()=>{
 await initDynamicRouter()
 router.replace(router.options.history.location);
})
</script>
